<template>
  <div class="user">
    <div class="user-head">
      <h2>我的</h2>
      <div class="img">
        <router-link to='setting'><img src="../../images/icon_wode_shezhi.png" alt=""></router-link>
      </div>
    </div>
    <div class="icon">
       <div class="img">
          <img src="../../images/IMG_wode_touxiang.png" alt="">
          <div class="text">
            <h2>{{username}}</h2>
            <h2>Beautiful lucky</h2>
          </div>
        </div>
        <div class="iconText">
          <div class="iconText_left">
          <router-link to="follow"> 
          关注
          </router-link>
          </div>
          <div class="iconText_right">
          <router-link to="fens"> 
          粉丝
          </router-link>
          </div>
        </div>
    </div>
    <div class="content">
      <div class="content_left">
      <router-link to='messages'>
        <img src="../../images/icon_wode_xiaoxi.png" alt="">
        <h2>消息</h2>
      </router-link>
      </div>
      <div class="content_center">
      <router-link to="collectgambit">         
      <img src="../../images/icon_shouye_shoucang.png" alt="collect">
        <h2>收藏</h2>
      </router-link>
      </div>
      <div class="content_right">
      <router-link to="signin">  
      <img src="../../images/icon_shouye_qiandao.png" alt="">
        <h2>签到</h2>
      </router-link>
      </div>
    </div>
   <Bottomnav :navflag4="navflag"></Bottomnav>
  </div>
</template>
<script>
import Bottomnav from "../../components/bottomnav"
export default {
  name:'uindex',
  data(){
      return{
        navflag:true,
        username:'jean'
      }
  },
  components:{
      Bottomnav
  },
  created(){
    this.username = this.$store.state.username
  }
}
</script>
<style lang="less" scoped>
.user{
    position: relative;

}
.user-head{
    width:750/75rem;
    height:292/75rem;
    background:#FF406F;
}
.user-head h2{
  margin-left:340/75rem;
    font-size:36/75rem;
    line-height:90/75rem;
    color:#fff;
    float:left;
}
.user-head .img{
    float:right;
    margin-right:20/75rem;
}
.icon{
  width:710/75rem;
  height:336/75rem;
  background:#FFF;
  position: absolute;
  top:120/75rem;
  left:20/75rem;
  border-radius:10/75rem;
  box-shadow:0 0 20px #D3C3C3;
}
.icon .img{
  height:140/75rem;
  float:left;
  margin-top:-20/75rem;
  margin-left:20/75rem;
}
.img .text{
  float:right;
  width:100/75rem;
  padding-top:60/75rem;
  margin-left:40/75rem;
}
.icon .img .text h2{
  color:#000;
  font-size:26/75rem;
  line-height:40/75rem;
  width:400/75rem;
  margin:0;
}
.iconText{
  width:710/75rem;
  height:80/75rem;
  margin-top:230/75rem;
  font-size:28/75rem; 
}
.iconText_left{
  width:355/75rem;
  float:left;
  text-align:center;
}
.iconText_right{
  width:355/75rem;
  float:left;
  text-align:center;
}
.content{
  width:710/75rem;
  height:137/75rem;
  box-shadow:0 0 20px #D3C3C3;
  border-radius:10/75rem;  
  margin-top:230/75rem;
  margin-left:20/75rem;
  background:#fff;
}
.content_left{
  width:50/75rem;
  height:80/75rem;
  padding-top:32/75rem;
  font-size:24/75rem;
  margin:0 93/75rem;
  float:left;
  line-height:30/75rem;
}
.content_center{
  width:50/75rem;
  height:80/75rem;
  padding-top:32/75rem;
  font-size:24/75rem;
  margin:0 93/75rem;
  float:left;
  line-height:30/75rem;
  
}
.content_right{
  width:50/75rem;
  height:80/75rem;
  padding-top:32/75rem;
  font-size:24/75rem;
  margin:0 93/75rem;
  line-height:30/75rem;
  float:left;
}

</style>
